<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>中华对联 - 我的</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    
    <!-- 配置Tailwind自定义颜色和字体 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#C41E3A', // 中国红
                        secondary: '#D4AF37', // 金色
                        accent: '#8B4513', // 棕色
                        light: '#F9F5F1', // 米色背景
                        dark: '#2D2327' // 深色文字
                    },
                    fontFamily: {
                        song: ['"Noto Serif SC"', 'serif'],
                        kai: ['"Noto Serif SC"', 'serif']
                    }
                }
            }
        }
    </script>
    
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .bg-pattern {
                background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23c41e3a' fill-opacity='0.03' fill-rule='evenodd'/%3E%3C/svg%3E");
            }
        }
    </style>
    
    <!-- 导入字体 -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&display=swap" rel="stylesheet">
</head>

<body class="bg-light bg-pattern text-dark min-h-screen font-song pb-20">
    <!-- 顶部导航栏 -->
    <header class="sticky top-0 z-50 bg-primary text-white shadow-md transition-all duration-300">
        <div class="container mx-auto px-4 py-3 flex justify-between items-center">
            <a href="index.html" class="p-2 rounded-full hover:bg-primary/80 transition-colors">
                <i class="fa fa-angle-left text-lg"></i>
            </a>
            <h1 class="text-[clamp(1.25rem,5vw,1.75rem)] font-kai font-bold tracking-wider">
                个人中心
            </h1>
            <button class="p-2 rounded-full hover:bg-primary/80 transition-colors">
                <i class="fa fa-cog text-lg"></i>
            </button>
        </div>
    </header>

    <main class="container mx-auto px-4 py-6">
        <!-- 用户信息 -->
        <section class="mb-6">
            <div class="bg-white rounded-xl shadow-sm overflow-hidden">
                <div class="p-6 flex items-center">
                    <div class="relative">
                        <img src="https://picsum.photos/id/64/100/100" alt="用户头像" class="w-20 h-20 rounded-full object-cover border-2 border-primary">
                        <div class="absolute bottom-0 right-0 w-6 h-6 bg-primary rounded-full flex items-center justify-center">
                            <i class="fa fa-camera text-white text-xs"></i>
                        </div>
                    </div>
                    <div class="ml-4 flex-1">
                        <h2 class="text-xl font-bold mb-1">联语爱好者</h2>
                        <p class="text-sm text-gray-500 mb-2">已加入 286 天</p>
                        <div class="flex space-x-4">
                            <div class="text-center">
                                <p class="font-medium">12</p>
                                <p class="text-xs text-gray-500">创作</p>
                            </div>
                            <div class="text-center">
                                <p class="font-medium">48</p>
                                <p class="text-xs text-gray-500">收藏</p>
                            </div>
                            <div class="text-center">
                                <p class="font-medium">256</p>
                                <p class="text-xs text-gray-500">喜欢</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 功能菜单 -->
        <section class="mb-6">
            <div class="bg-white rounded-xl shadow-sm overflow-hidden">
                <div class="divide-y divide-gray-100">
                    <!-- 我的创作 -->
                    <a href="#" class="flex items-center justify-between p-4 hover:bg-gray-50 transition-colors">
                        <div class="flex items-center">
                            <div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center mr-3">
                                <i class="fa fa-pencil text-primary"></i>
                            </div>
                            <span class="font-medium">我的创作</span>
                        </div>
                        <i class="fa fa-angle-right text-gray-400"></i>
                    </a>
                    
                    <!-- 我的收藏 -->
                    <a href="favorites.html" class="flex items-center justify-between p-4 hover:bg-gray-50 transition-colors">
                        <div class="flex items-center">
                            <div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center mr-3">
                                <i class="fa fa-bookmark text-primary"></i>
                            </div>
                            <span class="font-medium">我的收藏</span>
                        </div>
                        <div class="flex items-center">
                            <span class="text-xs text-white bg-primary rounded-full px-2 py-1 mr-2">48</span>
                            <i class="fa fa-angle-right text-gray-400"></i>
                        </div>
                    </a>
                    
                    <!-- 我的点赞 -->
                    <a href="#" class="flex items-center justify-between p-4 hover:bg-gray-50 transition-colors">
                        <div class="flex items-center">
                            <div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center mr-3">
                                <i class="fa fa-thumbs-up text-primary"></i>
                            </div>
                            <span class="font-medium">我的点赞</span>
                        </div>
                        <i class="fa fa-angle-right text-gray-400"></i>
                    </a>
                    
                    <!-- 历史浏览 -->
                    <a href="#" class="flex items-center justify-between p-4 hover:bg-gray-50 transition-colors">
                        <div class="flex items-center">
                            <div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center mr-3">
                                <i class="fa fa-history text-primary"></i>
                            </div>
                            <span class="font-medium">历史浏览</span>
                        </div>
                        <i class="fa fa-angle-right text-gray-400"></i>
                    </a>
                </div>
            </div>
        </section>

        <!-- 系统设置 -->
        <section class="mb-6">
            <div class="bg-white rounded-xl shadow-sm overflow-hidden">
                <div class="divide-y divide-gray-100">
                    <!-- 账户设置 -->
                    <a href="#" class="flex items-center justify-between p-4 hover:bg-gray-50 transition-colors">
                        <div class="flex items-center">
                            <div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center mr-3">
                                <i class="fa fa-user-o text-primary"></i>
                            </div>
                            <span class="font-medium">账户设置</span>
                        </div>
                        <i class="fa fa-angle-right text-gray-400"></i>
                    </a>
                    
                    <!-- 通知设置 -->
                    <a href="#" class="flex items-center justify-between p-4 hover:bg-gray-50 transition-colors">
                        <div class="flex items-center">
                            <div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center mr-3">
                                <i class="fa fa-bell-o text-primary"></i>
                            </div>
                            <span class="font-medium">通知设置</span>
                        </div>
                        <i class="fa fa-angle-right text-gray-400"></i>
                    </a>
                    
                    <!-- 关于我们 -->
                    <a href="#" class="flex items-center justify-between p-4 hover:bg-gray-50 transition-colors">
                        <div class="flex items-center">
                            <div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center mr-3">
                                <i class="fa fa-info-circle text-primary"></i>
                            </div>
                            <span class="font-medium">关于我们</span>
                        </div>
                        <i class="fa fa-angle-right text-gray-400"></i>
                    </a>
                    
                    <!-- 帮助与反馈 -->
                    <a href="#" class="flex items-center justify-between p-4 hover:bg-gray-50 transition-colors">
                        <div class="flex items-center">
                            <div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center mr-3">
                                <i class="fa fa-question-circle text-primary"></i>
                            </div>
                            <span class="font-medium">帮助与反馈</span>
                        </div>
                        <i class="fa fa-angle-right text-gray-400"></i>
                    </a>
                </div>
            </div>
        </section>

        <!-- 收藏内容 -->
        <section class="mb-8">
            <h2 class="text-lg font-bold mb-3 flex items-center">
                <i class="fa fa-bookmark text-primary mr-2"></i> 我的收藏
            </h2>
            
            <!-- 分类筛选 -->
            <div class="bg-white rounded-xl shadow-sm p-3 mb-4">
                <div class="flex overflow-x-auto pb-2 scrollbar-hide space-x-3">
                    <button class="whitespace-nowrap px-4 py-2 bg-primary text-white rounded-full text-sm">
                        全部
                    </button>
                    <button class="whitespace-nowrap px-4 py-2 bg-gray-100 hover:bg-gray-200 rounded-full text-sm transition-colors">
                        春联
                    </button>
                    <button class="whitespace-nowrap px-4 py-2 bg-gray-100 hover:bg-gray-200 rounded-full text-sm transition-colors">
                        喜联
                    </button>
                    <button class="whitespace-nowrap px-4 py-2 bg-gray-100 hover:bg-gray-200 rounded-full text-sm transition-colors">
                        寿联
                    </button>
                    <button class="whitespace-nowrap px-4 py-2 bg-gray-100 hover:bg-gray-200 rounded-full text-sm transition-colors">
                        名胜联
                    </button>
                    <button class="whitespace-nowrap px-4 py-2 bg-gray-100 hover:bg-gray-200 rounded-full text-sm transition-colors">
                        趣味联
                    </button>
                </div>
            </div>

            <!-- 收藏的对联列表 -->
            <div class="space-y-4">
                <!-- 收藏的对联1 -->
                <div class="bg-white rounded-xl shadow-sm overflow-hidden hover:shadow-md transition-shadow">
                    <div class="p-4">
                        <div class="font-kai text-center py-2">
                            <p class="text-[clamp(1rem,3vw,1.2rem)] mb-2 leading-relaxed">两个黄鹂鸣翠柳</p>
                            <p class="text-[clamp(1rem,3vw,1.2rem)] leading-relaxed border-t border-gray-100 pt-2">一行白鹭上青天</p>
                        </div>
                        <div class="flex justify-between items-center mt-3 pt-3 border-t border-gray-100">
                            <span class="text-xs bg-secondary/10 text-accent px-2 py-1 rounded-full">写景联</span>
                            <button class="text-primary hover:text-primary/80 transition-colors">
                                <i class="fa fa-heart"></i> 取消收藏
                            </button>
                        </div>
                    </div>
                    <div class="bg-gray-50 px-4 py-3 border-t border-gray-100">
                        <h3 class="text-sm font-medium mb-1">出处</h3>
                        <p class="text-xs text-gray-600">杜甫《绝句》改编，描绘了春天生机勃勃的景象，对仗工整，色彩鲜明。</p>
                    </div>
                </div>
                
                <!-- 收藏的对联2 -->
                <div class="bg-white rounded-xl shadow-sm overflow-hidden hover:shadow-md transition-shadow">
                    <div class="p-4">
                        <div class="font-kai text-center py-2">
                            <p class="text-[clamp(1rem,3vw,1.2rem)] mb-2 leading-relaxed">客上天然居</p>
                            <p class="text-[clamp(1rem,3vw,1.2rem)] leading-relaxed border-t border-gray-100 pt-2">居然天上客</p>
                        </div>
                        <div class="flex justify-between items-center mt-3 pt-3 border-t border-gray-100">
                            <span class="text-xs bg-secondary/10 text-accent px-2 py-1 rounded-full">回文联</span>
                            <button class="text-primary hover:text-primary/80 transition-colors">
                                <i class="fa fa-heart"></i> 取消收藏
                            </button>
                        </div>
                    </div>
                    <div class="bg-gray-50 px-4 py-3 border-t border-gray-100">
                        <h3 class="text-sm font-medium mb-1">出处</h3>
                        <p class="text-xs text-gray-600">传统回文联，正读倒读皆成联，意境相通，构思巧妙。</p>
                    </div>
                </div>
                
                <!-- 收藏的对联3 -->
                <div class="bg-white rounded-xl shadow-sm overflow-hidden hover:shadow-md transition-shadow">
                    <div class="p-4">
                        <div class="font-kai text-center py-2">
                            <p class="text-[clamp(1rem,3vw,1.2rem)] mb-2 leading-relaxed">忠厚传家久</p>
                            <p class="text-[clamp(1rem,3vw,1.2rem)] leading-relaxed border-t border-gray-100 pt-2">诗书继世长</p>
                        </div>
                        <div class="flex justify-between items-center mt-3 pt-3 border-t border-gray-100">
                            <span class="text-xs bg-secondary/10 text-accent px-2 py-1 rounded-full">宅第联</span>
                            <button class="text-primary hover:text-primary/80 transition-colors">
                                <i class="fa fa-heart"></i> 取消收藏
                            </button>
                        </div>
                    </div>
                    <div class="bg-gray-50 px-4 py-3 border-t border-gray-100">
                        <h3 class="text-sm font-medium mb-1">出处</h3>
                        <p class="text-xs text-gray-600">传统家训联，强调忠厚品德和诗书教育对家族传承的重要性。</p>
                    </div>
                </div>
                
                <!-- 收藏的对联4 -->
                <div class="bg-white rounded-xl shadow-sm overflow-hidden hover:shadow-md transition-shadow">
                    <div class="p-4">
                        <div class="font-kai text-center py-2">
                            <p class="text-[clamp(1rem,3vw,1.2rem)] mb-2 leading-relaxed">四面湖山归眼底</p>
                            <p class="text-[clamp(1rem,3vw,1.2rem)] leading-relaxed border-t border-gray-100 pt-2">万家忧乐到心头</p>
                        </div>
                        <div class="flex justify-between items-center mt-3 pt-3 border-t border-gray-100">
                            <span class="text-xs bg-secondary/10 text-accent px-2 py-1 rounded-full">名胜联</span>
                            <button class="text-primary hover:text-primary/80 transition-colors">
                                <i class="fa fa-heart"></i> 取消收藏
                            </button>
                        </div>
                    </div>
                    <div class="bg-gray-50 px-4 py-3 border-t border-gray-100">
                        <h3 class="text-sm font-medium mb-1">出处</h3>
                        <p class="text-xs text-gray-600">岳阳楼名联，化用范仲淹《岳阳楼记》中"先天下之忧而忧，后天下之乐而乐"的意境。</p>
                    </div>
                </div>
            </div>
            
            <!-- 加载更多 -->
            <div class="mt-6 text-center">
                <button class="px-6 py-2 border border-primary text-primary rounded-full text-sm hover:bg-primary hover:text-white transition-colors">
                    加载更多 <i class="fa fa-angle-down ml-1"></i>
                </button>
            </div>
        </section>

        <!-- 退出登录 -->
        <section class="mb-6">
            <button id="logoutBtn" class="w-full py-4 bg-white rounded-xl shadow-sm text-primary hover:bg-gray-50 transition-colors">
                退出登录
            </button>
        </section>
    </main>

    <!-- 底部导航 -->
    <footer class="fixed bottom-0 left-0 right-0 bg-white shadow-[0_-1px_3px_rgba(0,0,0,0.1)] py-2 z-40">
        <div class="container mx-auto">
            <div class="flex justify-around">
                <a href="index.html" class="flex flex-col items-center text-gray-400 hover:text-primary transition-colors">
                    <i class="fa fa-home text-lg"></i>
                    <span class="text-xs mt-1">首页</span>
                </a>
                <a href="create.html" class="flex flex-col items-center text-gray-400 hover:text-primary transition-colors">
                    <i class="fa fa-pencil text-lg"></i>
                    <span class="text-xs mt-1">创作</span>
                </a>
                <a href="profile.html" class="flex flex-col items-center text-primary">
                    <i class="fa fa-user text-lg"></i>
                    <span class="text-xs mt-1">我的</span>
                </a>
            </div>
        </div>
    </footer>

    <script>
        // 导航栏滚动效果
        window.addEventListener('scroll', function() {
            const header = document.querySelector('header');
            if (window.scrollY > 10) {
                header.classList.add('py-2');
                header.classList.remove('py-3');
            } else {
                header.classList.add('py-3');
                header.classList.remove('py-2');
            }
        });

        // 退出登录功能
        document.getElementById('logoutBtn').addEventListener('click', function() {
            if (confirm('确定要退出登录吗？')) {
                // 模拟退出登录
                alert('已退出登录');
                // 实际应用中这里会跳转到登录页面
                // window.location.href = 'login.html';
            }
        });

        // 点击头像更换
        document.querySelector('.w-20.h-20.rounded-full').addEventListener('click', function() {
            alert('上传头像功能暂未实现');
        });
        
        // 取消收藏功能
        document.querySelectorAll('button:has(.fa-heart)').forEach(button => {
            button.addEventListener('click', function() {
                const card = this.closest('div[class*="bg-white"]');
                
                // 添加淡出动画
                card.classList.add('opacity-0', 'transform', 'translate-y-4', 'transition-all', 'duration-300');
                
                // 动画结束后移除元素
                setTimeout(() => {
                    card.remove();
                    
                    // 如果没有收藏了，显示空状态
                    if (document.querySelectorAll('div[class*="bg-white"]').length === 0) {
                        document.querySelector('section:has(.fa-bookmark)').innerHTML = `
                            <h2 class="text-lg font-bold mb-3 flex items-center">
                                <i class="fa fa-bookmark text-primary mr-2"></i> 我的收藏
                            </h2>
                            <div class="text-center py-12 bg-white rounded-xl shadow-sm">
                                <div class="w-20 h-20 mx-auto mb-4 text-gray-300">
                                    <i class="fa fa-bookmark-o text-5xl"></i>
                                </div>
                                <h3 class="text-gray-500 mb-2">暂无收藏</h3>
                                <p class="text-gray-400 text-sm mb-6">去首页探索并收藏喜欢的对联吧</p>
                                <a href="index.html" class="inline-block px-6 py-2 bg-primary text-white rounded-full text-sm">
                                    浏览对联
                                </a>
                            </div>
                        `;
                    }
                }, 300);
            });
        });
        
        // 分类筛选交互
        document.querySelectorAll('.bg-gray-100.rounded-full').forEach(button => {
            button.addEventListener('click', function() {
                // 移除所有按钮的选中状态
                document.querySelectorAll('.rounded-full').forEach(btn => {
                    btn.classList.remove('bg-primary', 'text-white');
                    btn.classList.add('bg-gray-100');
                });
                
                // 设置当前按钮为选中状态
                this.classList.remove('bg-gray-100');
                this.classList.add('bg-primary', 'text-white');
            });
        });
    </script>
</body>
</html>